<template>
	<div class="headerbox">
		<div class="header">
			<div class="headerL">
				<a href="javascript:history.back(-1)" class="goback"
					><img src="/assets/images/goback.png"
				/></a>
			</div>
			<div class="headerC">
				<p>修改个人资料</p>
			</div>
			<div class="headerR"></div>
		</div>
	</div>
	<div class="clear"></div>
	<div class="h50"></div>
	<div class="clear"></div>
	<div class="user">
		<div class="user-image">
			<img :src="LoginUser.avatar" />
		</div>
	</div>
	<div class="form">
		<van-form @submit="onSubmit">
			<van-cell-group inset>
				<div class="item">
					<van-field
						v-model="business.nickname"
						name="nickname"
						label="昵称："
						placeholder="请输入昵称"
						:rules="[{ required: true, message: '昵称必填' }]"
					/>
				</div>
				<div class="item">
					<van-field
						v-model="business.mobile"
						name="mobile"
						label="手机号："
						readonly
					/>
				</div>
				<div class="item">
					<van-field
						v-model="business.email"
						name="email"
						label="邮箱： "
						type="email"
						placeholder="请输入邮箱"
					/>
				</div>
				<div class="item">
					<van-field
						v-model="business.password"
						name="password"
						label="登录密码： "
						type="password"
						placeholder="请输入登录密码"
					/>
				</div>
				<div class="item">
					<van-field name="gender" label="性别：" class="sex">
						<template #input>
							<van-radio-group v-model="business.gender" direction="horizontal">
								<van-radio name="0">保密&nbsp;&nbsp;&nbsp;&nbsp;</van-radio>
								<van-radio name="1">男 &nbsp;</van-radio>
								<van-radio name="2">女 &nbsp;</van-radio>
							</van-radio-group>
						</template>
					</van-field>
				</div>
				<div class="item">
					<van-field
						v-model="business.address"
						is-link
						readonly
						name="adresss"
						label="地区选择："
						placeholder="点击选择省市区"
						@click="showArea = true"
					/>
					<van-popup v-model:show="showArea" position="bottom">
						<van-area
							:columns-placeholder="['请选择', '请选择', '请选择']"
							:area-list="areaList"
							@confirm="onConfirm"
							@cancel="showArea = false"
						/>
					</van-popup>
				</div>
				<div class="item">
					<van-field name="avatar" label="修改头像：">
						<template #input>
							<van-uploader v-model="business.avatar" :max-count="1" />
						</template>
					</van-field>
				</div>
			</van-cell-group>
			<input type="submit" value="修改资料" />
		</van-form>
	</div>
</template>

<script setup>
	import { areaList } from "@vant/area-data";
	let router=useRouter()
	let { cookies } = useCookies();
	let LoginUser = reactive(cookies.get("LoginUser"));
	let showArea = ref(false);
	let business = reactive({
		nickname: LoginUser.nickname,
		mobile: LoginUser.mobile,
		address: "",
		avatar: [{ url: LoginUser.avatar }],
		email: LoginUser.email,
		password: "",
		gender: LoginUser.gender,
		addresss: "",
		province: LoginUser.province,
		city: LoginUser.city,
		district: LoginUser.district
	});
	// 修改用户信息
	let onSubmit = async (values) => {
		let data = {
			id: LoginUser.id,
			nickname: values.nickname,
			email: values.email,
			gender: values.gender,
			province: business.province,
			city: business.city,
			district: business.district,
		};
		//判断是否修改密码
		if (values.password) {
			data.password = values.password;
		}
		// 判断是否修改头像
		if (values.avatar.length > 0 && values.avatar[0].file) {
			data.avatar = values.avatar[0].file;
		}
		let result = await Api.business.profile(data);
		if (result.code == 1) {
			showSuccessToast({
				message: result.msg,
				onClose: function () {
					router.push("/business/index");
				},
			});
		} else {
			showFailToast(result.msg);
		}
	};
	// 确认选择地区
	let onConfirm = (values) => {
		let AreaText = values.selectedOptions;
		business.province = "";
		business.city = "";
		business.district = "";
		let address = [];
		values.selectedIndexes.forEach((item, index) => {
			if (item > 0) {
				address.push(AreaText[index].text);
				switch (index) {
					case 0:
						business.province = AreaText[index].value;
						break;
					case 1:
						business.city = AreaText[index].value;
						break;
					case 2:
						business.district = AreaText[index].value;
						break;
				}
			}
		});
		if (address.length > 0) {
			business.address = address.join("-");
		}
		showArea.value = false;
	};
	// 回调地址
	let getAreaText = () => {
		let city_list = areaList.city_list;
		let county_list = areaList.county_list;
		let province_list = areaList.province_list;

		return (
			(province_list[business.province] ?? "") +
			(city_list[business.city] ? "-" + city_list[business.city] : "") +
			(county_list[business.district] ? "-" + county_list[business.district] : "")
		);
	};
	business.address = getAreaText();
</script>

<style scoped>
	@import url("/assets/css/profile.css");
</style>